/*
 * @Author: HGC
 * @Date: 2019-05-21 09:58:45
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2019-08-29 15:17:47
 */
<template>
  <div class="inspectModule">
    <div class="inspectModuleFuncGroup">
      <el-tooltip class="item" effect="dark" content="图层列表" placement="right">
        <div
          :class="{active:moduleSelectedIndex===1}"
          @click="moduleSelectedIndex=1,headerTitle='图层列表'"
        >
          <i class="kfb-icon-kehuxinxiliebiao" />
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="任务列表" placement="right">
        <div
          :class="{active:moduleSelectedIndex==2}"
          @click="moduleSelectedIndex=2,headerTitle='任务列表'"
        >
          <i class="kfb-icon-yingyongguanli" />
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="标绘符号" placement="right">
        <div
          :class="{active:moduleSelectedIndex==3}"
          @click="moduleSelectedIndex=3,headerTitle='标绘符号'"
        >
          <i class="kfb-icon-xiugai" />
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="行政县界" placement="right">
        <div
          :class="{active:moduleSelectedIndex==4}"
          @click="moduleSelectedIndex=4,headerTitle='行政县界'"
        >
          <i class="kfb-icon-yizhangtu" />
        </div>
      </el-tooltip>
    </div>
    <transition name="el-zoom-in-top">
      <div v-show="moduleSelectedIndex!==0" class="inspectModuleMain">
        <div class="layerlist-header">
          <span>{{ headerTitle }}</span>
          <i
            type="text"
            class="mapModulePanelClose el-icon-close"
            style="float: right;"
            @click="close"
          />
        </div>
        <div class="inspectModuleContent">
          <layerTree v-show="moduleSelectedIndex===1" />
          <taskList v-show="moduleSelectedIndex===2" />
          <PlotSymbol v-show="moduleSelectedIndex===3" />
          <DistrictLocation v-show="moduleSelectedIndex===4"></DistrictLocation>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import LayerTree from "@/pages/xcgl/components/layerTree";
import TaskList from "@/pages/xcgl/components/taskList";
import PlotSymbol from "@/pages/xcgl/components/plotSymbol";
import DistrictLocation from "@/pages/xcgl/components/districtlocation";
export default {
  components: { LayerTree, TaskList, PlotSymbol, DistrictLocation },
  data() {
    return {
      headerTitle: "图层列表",
      moduleSelectedIndex: 1
    };
  },
  methods: {
    close() {
      if (this.moduleSelectedIndex === 4) {
        this.bus.$emit("map.qxj.clear", []);
      }
      this.moduleSelectedIndex = 0;
    }
  }
};
</script>

<style>
.inspectModule {
  position: absolute;
  z-index: 999;
  height: 100%;
}

.inspectModuleFuncGroup > div {
  width: 40px;
  height: 40px;
  background: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 18px;
  margin-left: 8px;
  /* border-bottom: 1px solid firebrick; */
  color: #409eff;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.inspectModuleFuncGroup > div:hover {
  background: #d9e9ff;
  color: #409eff;
}

.inspectModuleFuncGroup > div > i {
  font-family: "iconfont" !important;
  font-size: 20px;
  /* color: #409eff; */
}

.inspectModule .inspectModuleMain {
  position: absolute;
  left: 55px;
  width: 336px;
  padding: 0px;
  top: 18px;
  background: white;
}

.inspectModule .collapseIcon {
  width: 20px;
  height: 76px;
  position: absolute;
  right: -20px;
  top: 50%;
  margin-top: -38px;
  cursor: pointer;
  background: url(/static/img/oneMap/collapse.png) center no-repeat;
}

.inspectModulePanelClose {
  position: absolute;
  right: -19px;
  margin: 10px;
  top: -20px;
  font-size: 16px;
  transition: transform 0.3s;
  background-color: #f44336;
  border-radius: 10px;
  color: #fff;
  padding: 2px;
  z-index: 900;
  cursor: pointer;
}

.layerlist-header {
  color: #409eff;
  padding: 6px 15px;
  padding-right: 4px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "microsoft yahei", arial, tahoma, helvetica, sans-serif;
  font-size: 15px;
  background-color: #e5e5e5;
  margin-bottom: 5px;
}

.inspectModuleContent {
  padding: 7px;
}

.inspectModuleFuncGroup .active {
  background: #409eff;
  color: white;
}
</style>
